<template>
  <!-- 结算组件 -->
  <view class="my-settle-container">
    <!-- 全选单选框 -->
    <label class="my-settle-radio">
      <radio color="#c00000" :checked="isAllChecked" @click="updateAllGoodsState(!isAllChecked)" /><text>全选</text>
    </label>
    <!-- 结算文本 -->
    <view class="my-settle-descs">
      <text class="sum">合计:</text>
      <text class="price">￥{{checkedGoodsPrice}}</text>
    </view>
    <!-- 结算按钮 -->
    <text class="my-settle-settle" type="default" @click="payAll">结算({{settleCount}})</text>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: "my-settle",
    data() {
      return {
        // 设置倒计时的初始化秒数
        seconds: 3,
        // 定时器
        timer: ''
      };
    },
    // 设置勾选状态
    computed: {
      ...mapState('m_cart', ['cart']),
      ...mapGetters('m_cart', ['settleCount', 'total', 'checkedGoodsPrice']),
      ...mapGetters('m_user', ['addressStr']),
      ...mapState('m_user', ['token']),
      isAllChecked() {
        return this.total === this.settleCount
      }
    },
    methods: {
      ...mapMutations('m_cart', ['updateAllGoodsState']),
      ...mapMutations('m_user', ['updateSwitchData']),
      ...mapMutations('m_cart', ['updateCartMessage']),
      // 支付
      payAll() {
        // 判断是否添加地址
        if (!this.addressStr) {
          return uni.$showMsg('请先选择收货地址！')
          // 判断是否勾选商品
        } else if (this.settleCount === 0) {
          return uni.$showMsg('请选择商品进行支付！')
          // 判断是否登录
        } else if (!this.token) {
          return this.delayNavigate()
        } else {
          // 进行订单支付操作，调用微信支付
          uni.showToast({
            icon: 'success',
            title: '支付成功'
          })
          // 支付成功后购物车信息处理
          this.updateCartMessage()
        }
      },
      // 延时跳转至我的登录界面
      delayNavigate() {
        this.showTips(this.seconds)
        this.timer = setInterval(() => {
          this.seconds--
          if (this.seconds <= 0) {
            // 清除定时器
            clearInterval(this.timer)
            // 跳转界面
            uni.switchTab({
              url: '/pages/my/my',
              success: () => {
                // 设置跳转信息
                this.updateSwitchData({
                  openType: 'switchTab',
                  from: '/pages/cart/cart'
                })
              }
            })
            // 重置秒数
            this.seconds = 3
          } else {
            this.showTips(this.seconds)
          }

        }, 1000)
      },
      // 展示登录倒计时弹框
      showTips(sec) {
        uni.showToast({
          icon: 'none',
          title: '请先登录后再结算！' + sec + '秒之后自动跳转到登录界面',
          mask: true,
          duration: 1500
        })
      },
    },
    destoryed() {
      // 清除定时器
      clearInterval(this.timer)
    }
  }
</script>

<style lang="scss">
  .my-settle-container {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    padding-left: 5px;
    background: white;
    font-size: 14px;
    z-index: 999;

    .my-settle-radio {
      display: flex;
      align-items: center;
    }

    .my-settle-descs {

      .sum {}

      .price {
        color: #c00000;
        font-weight: bold;
      }
    }

    .my-settle-settle {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      min-width: 100px;
      background: #c00000;
      color: white;
    }
  }
</style>
